<template>
  <div class="w-full flex flex-wrap" v-loading="loading">
    <Card v-for="item in list" :key="item.id" :data="item" @refresh="getList" />
    <el-pagination
      v-show="list.length"
      class="w-full justify-center"
      :total="total"
      layout="total, sizes, prev, pager, next"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageSize"
      :page-sizes="[15, 30, 60, 120]"
    ></el-pagination>
    <Empty v-if="!list.length" />
  </div>
</template>

<script setup>
import Card from "./CooCard.vue";
import { usePage, useLoading } from "@/hooks";
import { useUserStore } from "@/store";

const list = ref([]);
const { page, total } = usePage(15);
const { loading, setLoading } = useLoading();
const userStore = useUserStore();

const $api = inject("$api");
const getList = async () => {
  setLoading(true);
  const params = {
    ...page.value,
  };

  try {
    const { data: rows, total: resTotal } =
      await $api.userCenter.myCooperationList({
        ...page.value,
        demandUserId: userStore.userInfo?.userId,
      });
    list.value = rows;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
  () => page.value,
  () => {
    getList();
  },
  {
    deep: true,
  }
);

onMounted(() => {
  getList();
});
</script>
